<template>
  <Panel title="流程组件" :data="data">
    <template #rotate>
      <button class="vc-btn vc-mr-2" @click="setRotate(0)">重置</button>
      <button class="vc-btn" title="顺时针旋转90°" @click="setRotate(clockwise90(rotate))">
        <Icon name="rotate" />
      </button>
    </template>
  </Panel>
</template>
<script setup lang="ts">
import Icon from "/@/components/base/Icon.vue";
import Panel from "./Panel.vue";
import { computed } from "vue";
import type { AttrItem } from "./types";
import { clockwise90 } from "/@/utils/common";
const props = defineProps<{
  y: number;
  x: number;
  width: number;
  height: number;
  rotate: number;
  setRotate: (deg: number) => void;
}>();
const data = computed<AttrItem[]>(() => {
  return [
    { name: "设备大小", value: `${Math.round(props.width)} X ${Math.round(props.height)}` },
    { name: "设备坐标", value: `${Math.round(props.x)} X ${Math.round(props.y)}` },
    { name: "旋转角度(顺时针方向)", value: Math.round(props.rotate), unit: "°", slotName: "rotate" },
  ];
});
</script>
